<!DOCTYPE html>
<html lang="en">
<head>
    <script type="application/javascript">
        function addQuestion() {
            let requestBody = {"keyword":"","weight":0,"content":"<p>"+document.getElementById("question").value+"</p>"};
            let subQuestions = [];
            let remark1 = document.getElementsByName("remark1");
            let remark2 = document.getElementsByName("remark2");
            let remark3 = document.getElementsByName("remark3");
            let answer = document.getElementsByName("answer");
            for( let i = 0 ; i < remark1.length; i++){
                let sub = {"remark1":remark1[i].value,"remark2":remark2[i].value,
                    "remark3":remark3[i].value,
                    "answer":answer[i].value,};
                subQuestions[i] = sub;
            }
            requestBody.subQuestions = subQuestions;
            // let question = document.getElementById("question").value;
            fetch("/exam/question/add", {
                method: "post", headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(requestBody)
            }).then(function (response) {
                return response.json()
            }).then(function (data) {
                document.getElementById("result").innerHTML = JSON.stringify(data);
                alert("处理完成");
            })
        }

        function updateOptions() {
            let rows = document.getElementById("rows").value;
            let existRows = document.getElementById("options").childElementCount / 5 - 1;
            if(existRows > rows){//remove
                let nums = (existRows - rows) * 5;
                console.log("remove",nums);
                for( let i = 0; i < nums; i++){
                    removeLastChild(document.getElementById("options"));
                }
            }else if(existRows < rows){//append
                for(let i = 0 ; i < rows - existRows; i ++)
                    appendRow(existRows + i + 1);
            }
        }

        function removeLastChild(node){
            while(node.lastChild)
            {
                if(node.lastChild.tagName && node.lastChild.tagName === 'DIV')
                {
                    node.removeChild(node.lastChild);
                    return;
                }else
                    node.removeChild(node.lastChild);
            }
        }
        function appendRow(seq){
            let node = document.getElementById("options");
            let element = document.createElement("div");
            element.textContent = 'option'+seq;
            node.append(element);
            element = document.createElement("div");
            let input = document.createElement("input");
            input.setAttribute("type","text");
            input.setAttribute("name","remark1");
            element.append(input);
            node.append(element);
            element = document.createElement("div");
            input = document.createElement("input");
            input.setAttribute("type","text");
            input.setAttribute("name","remark2");
            element.append(input);
            node.append(element);
            element = document.createElement("div");
            input = document.createElement("input");
            input.setAttribute("type","text");
            input.setAttribute("name","remark3");
            element.append(input);
            node.append(element);
            element = document.createElement("div");
            input = document.createElement("input");
            input.setAttribute("type","text");
            input.setAttribute("name","answer");
            element.append(input);
            node.append(element);
        }
    </script>
    <style>
        #options {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
        }
    </style>
</head>
Content:
<textarea id="question" rows="30" cols="120">

</textarea>
<div>
    Options Number: <input type="number" value="10" onchange="updateOptions()" id="rows"/>
</div>
<div id="options">
    <div></div>
    <div>remark1</div>
    <div>remark2</div>
    <div>remark3</div>
    <div>answer</div>
    <div>option1:</div>
    <div><input type="text" name="remark1"/></div>
    <div><input type="text" name="remark2"></div>
    <div><input type="text" name="remark3"></div>
    <div><input type="text" name="answer"></div>
    <div>option2:</div>
    <div><input type="text" name="remark1"/></div>
    <div><input type="text" name="remark2"></div>
    <div><input type="text" name="remark3"></div>
    <div><input type="text" name="answer"></div>
    <div>option3:</div>
    <div><input type="text" name="remark1"/></div>
    <div><input type="text" name="remark2"></div>
    <div><input type="text" name="remark3"></div>
    <div><input type="text" name="answer"></div>
    <div>option4:</div>
    <div><input type="text" name="remark1"/></div>
    <div><input type="text" name="remark2"></div>
    <div><input type="text" name="remark3"></div>
    <div><input type="text" name="answer"></div>
    <div>option5:</div>
    <div><input type="text" name="remark1"/></div>
    <div><input type="text" name="remark2"></div>
    <div><input type="text" name="remark3"></div>
    <div><input type="text" name="answer"></div>
    <div>option6:</div>
    <div><input type="text" name="remark1"/></div>
    <div><input type="text" name="remark2"></div>
    <div><input type="text" name="remark3"></div>
    <div><input type="text" name="answer"></div>
    <div>option7:</div>
    <div><input type="text" name="remark1"/></div>
    <div><input type="text" name="remark2"></div>
    <div><input type="text" name="remark3"></div>
    <div><input type="text" name="answer"></div>
    <div>option8:</div>
    <div><input type="text" name="remark1"/></div>
    <div><input type="text" name="remark2"></div>
    <div><input type="text" name="remark3"></div>
    <div><input type="text" name="answer"></div>
    <div>option9:</div>
    <div><input type="text" name="remark1"/></div>
    <div><input type="text" name="remark2"></div>
    <div><input type="text" name="remark3"></div>
    <div><input type="text" name="answer"></div>
    <div>option10:</div>
    <div><input type="text" name="remark1"/></div>
    <div><input type="text" name="remark2"></div>
    <div><input type="text" name="remark3"></div>
    <div><input type="text" name="answer"></div>
</div>

<p>
    <button onclick="addQuestion()">submit</button>
</p>
<p id="result"></p>
</html>